<template>
  <div
    :style="{ background: bgc }"
    class="w-full h-full flex justify-center items-center absolute top-0 left-0 z-50"
  >
    <div class="inline-block text-center">
      <i class="el-icon-loading text-2xl text-[#0062ff]" />
      <div class="text-[#0062ff] text-xl">{{ loadingText }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    loadingText: {
      type: String,
      default: 'Loading...',
    },
    bgc: {
      type: String,
      default: 'rgba(0,0,0,0.5)',
    },
  },
  data() {
    return {}
  },
  head: {
    title: '',
  },
  mounted() {},
})
</script>
<style lang="scss" scoped></style>
